#HTML 的 <picture> 标签

HTML 的 <picture> 元素通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <source> 元素，如果没有匹配的，就选择 <img> 元素的 src 属性中的 URL。然后，所选图像呈现在<img>元素占据的空间中。

#属性

#示例

<picture>
  <!-- 针对大屏幕（宽度≥1200px）提供高清图像 -->
  <source 
    media="(min-width: 1200px)" 
    srcset="large-image.jpg, large-image-2x.jpg 2x"
    type="image/jpeg">
  
  <!-- 中等屏幕（宽度≥768px）提供中等分辨率图像 -->
  <source 
    media="(min-width: 768px)" 
    srcset="medium-image.webp, medium-image-2x.webp 2x"
    type="image/webp">
  
  <!-- 小屏幕设备提供优化后的图像（WebP格式优先） -->
  <source 
    srcset="small-image.webp"
    type="image/webp">
  
  <!-- 默认回退图像（当浏览器不支持<picture>或所有source不匹配时使用） -->
  <img 
    src="fallback-image.jpg" 
    alt="描述图像内容的文字"
    width="800"
    height="450"
    loading="lazy">
</picture>